<script setup>
import { QuestionFilled } from '@element-plus/icons-vue';
const props = defineProps({
  content: {
    type: String,
    default: 'tip',
  },
  effect: {
    type: String,
    default: 'light',
  },
  title: {
    type: String,
    default: '',
  },
  tipIconClass: {
    type: String,
    default: '',
  },
});
</script>

<template>
  <el-popover
    :width="400"
    popper-style="max-height: 400px; overflow: auto;"
    trigger="hover"
    placement="top"
    v-if="props.content.length > 0"
  >
    <div class="content-wrap" v-html="content"></div>
    <template #reference>
      <el-icon
        :class="props.tipIconClass"
        class="tip-icon"
        :size="18"
        color="#E5E5E5"
        style="margin-left: 5px"
        ><QuestionFilled
      /></el-icon>
    </template>
  </el-popover>
  <div v-else class="empty"></div>
</template>
<style lang="scss" scoped>
.empty {
  width: 18px;
  height: 18px;
}
</style>
